<template>
  <div class="content">
    <el-card>
      <div class="top">
        <div class="left">
          <el-form
            :inline="true"
            :model="searchTable"
            class="demo-form-inline"
          >
            <el-form-item label="关键字">
              <el-input
                v-model="searchTable.keyword"
                placeholder="根据文章标题搜索"
              />
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                v-model="searchTable.state"
                placeholder="请选择"
              >
                <el-option label="启用" :value="1"/>
                <el-option label="禁用" :value="0"/>
                <el-option
                  label="已启用"
                  :value="1"
                />
                <el-option
                  label="已禁用"
                  :value="0"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                @click="clearWord"
              >
                清除
              </el-button>
              <el-button
                size="small"
                type="primary"
                @click="searchKeyWord"
              >
              搜索
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="right">
          <el-row>
            <el-button
              type="success"
              icon="el-icon-edit"
              @click="addPreviewVisibleClick"
            >
              新增技巧
            </el-button>
          </el-row>
        </div>
      </div>

      <!-- 新增文章弹窗 -->
         <el-dialog
          title="新增文章"
          :visible.sync="addPreviewVisible"
          width="50%"
        >
         <el-form
          :model="form"
          ref="form"
         >
          <el-form-item
             label="文章标题"
             prop="title"
             :label-width="formLabelWidth"
          >
             <el-input
               v-model="form.title"
               placeholder="请输入文章标题"
             />
          </el-form-item>
          <el-form-item
             :label-width="formLabelWidth"
             label="文章标题"
             prop="articleBody"
          >
             <quill-editor
                class="ArticlesContent"
               :options="editorOption"
               v-model="form.articleBody"
             />
          </el-form-item>
          <el-form-item
             :label-width="formLabelWidth"
             label="视频地址"
             prop="URL"
          >
             <el-input
               v-model="form.videoURL"
               placeholder="请输入视频地址"
             />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addPreviewVisible = false">
             取 消
          </el-button>
          <el-button
             type="primary"
             @click="addArticlesOK(form)"
          >
             确 定
          </el-button>
        </span>
        </el-dialog>

      <!-- 记录 -->
      <div class="record-container">
        <i class="el-icon-info"></i>
        共 {{ articlesList.counts }} 条记录
      </div>


      <!-- 数据列表 -->
      <my-table :table-props="{
        data: articlesList.items,
      }" :columns="[
        { label: '序号', prop: 'index', align: 'center' },
        { label: '文章标题', slotName: 'title', align: 'center', width: '300px' },
        { label: '阅读数', prop: 'visits', align: 'center' },
        { label: '录入人', prop: 'username', align: 'center' },
        { label: '录入时间', slotName: 'createTime', align: 'center', width: '150px' },
        { label: '状态', prop: 'state', align: 'center'},
        { slotName: 'articleBody', align: 'center' },
        { label: '操作', slotName: 'operators', width: '180px', align: 'center', fixed: 'right'}, // 带插槽
        { label: '序号', prop: 'index', width: 50, align: 'center' },
        { label: '文章标题', prop: 'title', width:350 , align: 'center' },
        { label: '阅读数', prop: 'visits', width: 150,align: 'center' },
        { label: '录入人', prop: 'username', width: 150, align: 'center' },
        { label: '录入时间', slotName: 'createTime', width: 200, align: 'center' },
        { label: '状态', prop: 'state',width: 120, align: 'center' },
        { label: '操作', slotName: 'operators', width: 200, align: 'center', fixed: 'right' }, // 带插槽
      ]" :pagination-props="{
        layout: 'sizes, prev, pager, next, jumper',
        total: articlesList.counts
      }" :pagination-events="events">

        <template v-slot:title="scope">
          <span>{{ scope.row.title }}</span>
          <i
            style="cursor: pointer"
            :class="scope.row.videoURL ? 'el-icon-video-play' : '' "
            @click="playVideo"
          />
          <el-dialog title="视频播放" :visible.sync="videoVisible">
            <video
              width="320"
              height="240"
              controls
              autoplay
              v-show="videoVisible"
            >
              <source :src="scope.row.videoURL" type="video/ogg">
              <source :src="scope.row.videoURL" type="video/mp4">
              <source :src="scope.row.videoURL" type="video/webm">
              <object data="movie.mp4" width="320" height="240">
                <embed width="320" height="240" :src="scope.row.videoURL">
              </object>
            </video>
          </el-dialog>

        </template>
        <template #createTime>
          <div>{{ getYear(articlesList.createTime) }}</div>
        </template>
        <template v-slot:operators="scope">
          <el-button
            @click="PreviewArticleClick(scope.row)"
            type="text"
            size="medium"
          >
             预览
          </el-button>
          <el-button
            @click="onClick(scope.row)"
            type="text"
            size="medium"
          >
            {{ scope.row.state === '已禁用' ? '启用' : '禁用' }}
          </el-button>
          <el-button
            @click="onRowClick(scope.row)"
            type="text"
            size="medium"
            :disabled="scope.row.state === '已禁用' ? true : false"
          >
            修改
          </el-button>
          <el-button
            @click="onArticlesDel(scope.row)"
            type="text"
            size="medium"
            :disabled="scope.row.state === '已禁用' ? true : false"
          >
            删除
          </el-button>
        </template>
      </my-table>

      <!-- 文章预览弹窗 -->
      <el-dialog
        title="预览文章"
        :visible.sync="PreviewArticle"
        width="800px"
      >
        <h2>{{ Preview.title }}</h2>
        <span class="time">
          {{ getYear( Preview.createTime) }}
        </span>
        <span>{{ Preview.username }}</span>
        <i class="el-icon-view"></i>
        <span>{{ Preview.visits }}</span>
        <div v-html="Preview.articleBody"  class="pre">
        </div>
      </el-dialog>

      <!--  修改文章弹窗 -->
      <el-dialog
        title="修改文章"
        :visible.sync="PreviewVisible"
        width="800px"
         >
        <el-form
          :model="amendForm"
          :rules="rules"
          ref="form"
        >
          <el-form-item
            label="文章标题:"
            :label-width="formLabelWidth"
            prop="title"
          >
            <el-input
              type="text"
              v-model="amendForm.title"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="文章内容:"
            :label-width="formLabelWidth"
            prop="articleBody"
          >
            <quill-editor
              class="ArticlesContent"
              v-model="amendForm.articleBody"
              :options="editorOption"
            />
          </el-form-item>
          <el-form-item
            label="视频地址:"
            :label-width="formLabelWidth"
            prop="URL"
          >
            <el-input v-model="amendForm.URL" autocomplete="off"/>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button @click="PreviewVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import * as articlesApi from '@/api/hmmm/articles'
import moment from 'moment'
let articlesID = null
export default {
  data() {
    return {
      // 视频弹窗
      videoVisible: false,
      searchTable: {
        keyword: '',
        state: ''
      },
      //搜索表单
      searchTable: {},
      form: {
        title: '',
        articleBody: '',
        URL: '',
      },
      formLabelWidth: '120px',
      // 修改富文本编辑器配置
      amendForm: {
        title: '',
        articleBody: '',
        URL: '',
      },
      // 新增富文本编辑器配置
      editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用 代码块
            [{ color: [] }, { background: [] }], // 字体颜色 背景颜色
            ['link', 'image', 'video'], // 链接 图片 视频
          ],
        },
      },
      //表单验证规则
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
          { min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur' }
        ],
        URL: [
          { required: true, message: '请输入视频地址', trigger: 'blur' },
          { min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur' }
        ],
      },
      //修改文章弹窗
      PreviewVisible: false,
      //预览文章弹窗
      PreviewArticle:false,
      //新增文章弹窗
      addPreviewVisible: false,
      Preview: '',
      currentPage: 1,
      pageSize: 10,
      events: {
        'current-change': this.onCurrentPageChange
      },

    };
  },
  computed: {
    ...mapState('articles', [
      'articlesList'
    ]),
  },
  methods: {
    ...mapActions('articles', [
      'updateArticlesList'
    ]),
    getYear(createTime) {
      return moment(createTime).format('YYYY-MM-DD HH:mm:ss')
    },
    //新增文章
    addArticlesOK() {
      this.addPreviewVisible = false
      articlesApi.add(this.form)
      this.$message.success('新增成功')
      this.updateArticlesList({
        page: this.currentPage,
        pagesize: this.pageSize
      })
    },

    //清除搜索条件
    clearWord() {
      this.searchTable = {
        keyword: '',
        state: ''
      },
      this.searchTable = {},
      this.updateArticlesList({
        page: this.currentPage,
        pagesize: this.pageSize
      })
    },
    //点击搜索
    searchKeyWord() {
      // this.currentPage = 1
      this.updateArticlesList({
        page: 1,
        pagesize: this.pageSize,
        ...this.searchTable,
      })
    },
    //新增技巧弹窗
    addPreviewVisibleClick(){
      this.addPreviewVisible = true
      this.form ={
        title: '',
        articleBody: '',
        URL: '',
      }
    },
    // 文章预览点击
    PreviewArticleClick(scope) {
      this.PreviewArticle=true,
      this.Preview = scope

    },
    //禁用or启用
    async onClick(scope) {
      await articlesApi.changeState({
        id: scope.id,
        state: scope.state === '已禁用' ? 1 : 0
      })
      // 刷新数据
      this.updateArticlesList({
        page: this.currentPage,
        pagesize: this.pageSize
      })
    },
    // 修改文章
    onRowClick(scope) {
      articlesID = scope.id
      this.PreviewVisible = true
      // 返显
      this.amendForm.title = scope.title
      this.amendForm.articleBody = scope.articleBody
      this.amendForm.URL = scope.videoURL
      this.updateArticlesList({
        page: this.currentPage,
        pagesize: this.pageSize
      })
    },
    //修改文章确定
    confirm() {
      this.PreviewVisible = false
      articlesApi.update({
        id: articlesID,
        title: this.form.title,
        articleBody: this.form.articleBody,
        videoURL: this.form.URL,
      })
      // 刷新数据
      this.updateArticlesList({
        page: this.currentPage,
        pagesize: this.pageSize
      })
    },
    // 打开视频弹窗
    playVideo() {
      this.videoVisible = true
    },
    // 文章页面切换
    onCurrentPageChange(currentPage) {
      this.currentPage = currentPage
      this.updateArticlesList({
        page: this.currentPage,
        pagesize: this.pageSize
      })
    },
    // 文章删除
    onArticlesDel(scope) {
      this.$confirm('确定删除该文章吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        articlesApi.remove({
          id: scope.id
        })
        console.log(scope.id);
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        setTimeout(() => {
          this.updateArticlesList({
            page: this.currentPage,
            pagesize: this.pageSize
          })
        }, 500)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  created() {
    this.updateArticlesList({
      page: this.currentPage,
      pagesize: this.pageSize
    })
  }
}
</script>

<style lang="scss" scoped>


.content {
  margin: 0 10px;
  .record-container {
      background-color: #f4f4f5;
      border-radius: 4px;
      padding: 8px;
      margin-left: 26px;
      font-size: 13px;
      color: #909399;
      margin-bottom: 16px;
    }
  .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .left {
      display: flex;
      .left-search {
        display: flex;
        align-items: center;
        flex-direction: row;
        margin-right: 30px;
      }
      .btn {
        margin-left: 10px;
      }
    }
      .table-wrapper {
        margin-bottom: 20px;
      }
  }
  .time,
  i,
  el-icon-view {
    margin: 0 10px;
  }
  h2 {
    margin: 0;
  }
  .ArticlesContent {
    height: 200px;
    overflow: hidden;
    margin: 20px 0;
    outline: 1px solid #ccc;
  }
  .dialog-footer {
    text-align: center;
  }
  h2{
    margin: 10px 0;
  }
  .pre{
    margin-top: 20px;
    background-color: #f5f5f5;
    border-top: 1px dashed #ccc;
    height: 100px;
  }
}
</style>
